﻿﻿<!DOCTYPE HTML>
<html>
<head>
<title>Gaming Blog Bootstarp Website Template | Home</title>
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<link rel="shortcut icon" type="image/x-icon" href="../../beng/icon.png">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.0.min.js"></script>
<!-- Custom Theme files -->
<link href="css/style.css" rel='stylesheet' type='text/css' />
<!-- Custom Theme files -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- Google Fonts -->
<link href='//fonts.googleapis.com/css?family=Ubuntu:300,400,500,700' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="js/jquery.mixitup.min.js"></script>
<script type="text/javascript">
$(function () {
	
	var filterList = {
	
		init: function () {
		
			// MixItUp plugin
			// http://mixitup.io
			$('#portfoliolist').mixitup({
				targetSelector: '.portfolio',
				filterSelector: '.filter',
				effects: ['fade'],
				easing: 'snap',
				// call the hover effect
				onMixEnd: filterList.hoverEffect()
			});				
		
		},
		
		hoverEffect: function () {
		
			// Simple parallax effect
			$('#portfoliolist .portfolio').hover(
				function () {
					$(this).find('.label').stop().animate({bottom: 0}, 200, 'easeOutQuad');
					$(this).find('img').stop().animate({top: -30}, 500, 'easeOutQuad');				
				},
				function () {
					$(this).find('.label').stop().animate({bottom: -40}, 200, 'easeInQuad');
					$(this).find('img').stop().animate({top: 0}, 300, 'easeOutQuad');								
				}		
			);				
		
		}

	};
	
	// Run the show!
	filterList.init();
	
	
});	
</script>
</head>
<body>
<!-- Header Starts Here -->
<div class="header">
	<div class="container">
		<div class="logo">
			<a href="index.html"><img src="images/logo.png" alt=""></a>
		</div>
		<span class="menu"></span>
		<div class="navigation">
			<ul class="navig cl-effect-3" >
				<li><a href="index.html">主页</a></li>
				<li><a href="games.html">抽奖</a></li>
				<li><a href="blog.html">鸡蛋动画</a></li>
				<li><a href="features.html">爱心照片墙</a></li>
			</ul>
			<div class="search-bar">
					<input type="text" placeholder="搜索" required="" />
					<input type="submit" value="" />
			</div>
			<div class="clearfix"></div>
			<script>
				$( "span.menu" ).click(function() {
				  $( ".navigation" ).slideToggle( "slow", function() {
				    // Animation complete.
				  });
				});
			</script>

		</div>
		<div class="clearfix"></div>
	</div>
</div>
<div class="banner"></div>
<!-- Header Ends Here -->	
<div class="banner-bot">
	<div class="container">
		<h2>Hello!</h2>
		<p>这片银河中有名为「星神」的存在，祂们造就现实，抹消星辰，在无数「世界」中留下祂们的痕迹。你——一名特殊的旅客，将与继承「开拓」意志的同伴一起，乘坐星穹列车穿越银河，沿着某位「星神」曾经所行之途前进。你将由此探索新的文明，结识新的伙伴，在无数光怪陆离的「世界」与「世界」之间展开新的冒险。所有你想知道的，都将在群星中找到答案。</p>
		<p>《星穹铁道》采用了全新的指令式战斗系统，操作简洁而富于策略。你可以借助「秘技」料敌机先，利用丰富的战斗策略压制敌人，「弱点击破」「追加攻击」「持续伤害」……最后施放华丽的「终结技」一锤定音。在紧张刺激的回合制战斗之外，还有模拟经营、休闲消除、解谜探索...尽情探索多元玩法的精彩，体验无限的可能性吧！</p>
		<nav class="cl-effect-3"><a href="#">更多内容</a></nav>
	</div>
</div>
<!-- Gallery Starts Here -->
<div class="gallery">
	<div class="container">
		<h3>画廊展示</h3>
		<div class="gallery-top">
			<ul id="filters" class="clearfix">
						<li><span class="filter active" data-filter="app card icon logo web">1</span></li>
						<li><span class="filter" data-filter="app">2</span></li>
						<li><span class="filter" data-filter="card">3</span></li>
						<li><span class="filter" data-filter="icon">4</span></li>
					</ul>
					<div id="portfoliolist">
					<div class="portfolio app mix_all" data-cat="app" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper">		
							<a href="index.html" class="b-link-stripe b-animate-go  thickbox">
						     <img src="beng/2.png" /><div class="b-wrapper"><h2 class="b-animate b-from-left    b-delay03 "> </h2>
						  		</div></a>
		                </div>
					</div>				
					<div class="portfolio icon mix_all" data-cat="icon" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper">		
							<a href="index.html" class="b-link-stripe b-animate-go  thickbox">
						     <img src="beng/3.png" /><div class="b-wrapper"><h2 class="b-animate b-from-left    b-delay03 "> </h2>
						  	 </div></a>
		                </div>
					</div>		
					<div class="portfolio card mix_all" data-cat="card" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper">		
							<a href="index.html" class="b-link-stripe b-animate-go  thickbox">
						     <img src="beng/69.jpg" /><div class="b-wrapper"><h2 class="b-animate b-from-left    b-delay03 "> </h2>
						  	 </div></a>
		                </div>
					</div>				
					<div class="portfolio logos mix_all" data-cat="logo" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper">		
							<a href="index.html" class="b-link-stripe b-animate-go  thickbox">
						     <img src="beng/45.jpg" /><div class="b-wrapper"><h2 class="b-animate b-from-left    b-delay03 "> </h2>
						  	 </div></a>
		                </div>
					</div>	
					<div class="portfolio card mix_all" data-cat="card" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper">		
							<a href="index.html" class="b-link-stripe b-animate-go  thickbox">
						     <img src="beng/9(1).jpg" /><div class="b-wrapper"><h2 class="b-animate b-from-left    b-delay03 "> </h2>
						  	 </div></a>
		                </div>
					</div>			
				</div>
		
		</div>
	</div>
</div>
<!-- Gallery Ends Here -->
<!-- Video Part starts Here -->
<div class="video-serch">
	<div class="container">
		<div class="col-md-6 vid-col">
			<p>【奇人异士，星海同游】</p>
			<p>星海之中，除「你」之外，还有无数身怀绝技的「他们」。你将拥有极寒之地的患难友情，仙舟危机中的并肩作战，金色美梦里的不期而遇……在冒险中邂逅英雄，结识伙伴，共赴奇旅。除了携手经历一段段冒险旅程，你还能通过多种方式与伙伴们增进友谊、分享奇遇，了解旅伴们更多不为人知的经历和故事......</p>
			<div class="more">
				<a href="#">查看更多视频</a>
			</div>
		</div> 
		<div class="col-md-6 vid-coll">
			<img src="beng/9.jpg" alt="">
			<div class="play-but">
				<a href="#small-dialog5" class="thickbox play-icon popup-with-zoom-anim"><img src="images/vid-play.png" alt="" /></a>
			</div>
			<!--pop-up-box-->
					  <script type="text/javascript" src="js/modernizr.custom.53451.js"></script>  
					<link href="css/popuo-box.css" rel="stylesheet" type="text/css" media="all"/>
					<script src="js/jquery.magnific-popup.js" type="text/javascript"></script>
			<!--pop-up-box-->
			<div id="small-dialog5" class="mfp-hide">
					<iframe src="#"  frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen> </iframe>
				</div>
				 <script>
						$(document).ready(function() {
						$('.popup-with-zoom-anim').magnificPopup({
							type: 'inline',
							fixedContentPos: false,
							fixedBgPos: true,
							overflowY: 'auto',
							closeBtnInside: true,
							preloader: false,
							midClick: true,
							removalDelay: 300,
							mainClass: 'my-mfp-zoom-in'
						});
																						
						});
				</script>
		</div>
		<div class="clearfix"></div>
	</div>	
</div>
<!-- Video Part Ends Here -->
<!-- What New Part starts Here -->
<div class="what-new">
	<div class="container">
		<h3>What's new</h3>
		<div class="blog-news">
			<div class="blog-news-grid">
				<div class="news-grid-left">
					<h4>06</h4>
					<small>of january 2015</small>
				</div>
				<div class="news-grid-right">
					<h4>1，队伍与编队（GMT）</h4>
					<p>队伍是控制角色元素的一层机制（方法），是为了增加乐趣同时增加可扩展性（目的），增加的一个稳定的机制并在此基础上创建动态的元素（工具），而角色元素是被队伍机制管理的动态的元素。</p>
				</div>
				<div class="clearfix"></div>
			</div>
			<div class="blog-news-grid b_n_g">
				<div class="news-grid-left">
					<h4>28</h4>
					<small>of january 2015</small>
				</div>
				<div class="news-grid-right">
					<h4>2，箱庭探索系统（MDA）</h4>
					<p>为了让玩家体验箱庭，获得正反馈，玩家会得到任务目标，让进入包括局内战斗，解密，规划路线等体验中。箱庭系统的核心交互是敌我交互。</p>
				</div>
				<div class="clearfix"></div>
			</div>
			<div class="clearfix"></div>
		</div>
		<div class="blog-news b_n">
			<div class="blog-news-grid">
				<div class="news-grid-left">
					<h4>21</h4>
					<small>of january 2015</small>
				</div>
				<div class="news-grid-right">
					<h4>3，局内战斗系统</h4>
					<p>局内战斗包括我方编队，敌方编队，场地及游戏UI等要素。游戏机制有生存，攻击，防御等主要机制，扩展机制都是建立在基础机制之上，体现可扩展性（添加额外的基础机制不仅会产生额外的学习成本，打破玩家决策体系，还会影响玩家对规则的信任）。</p>
				</div>
				<div class="clearfix"></div>
			</div>
			<div class="blog-news-grid b_n_g">
				<div class="news-grid-left">
					<h4>05</h4>
					<small>of january 2015</small>
				</div>
				<div class="news-grid-right">
					<h4>4，动态平衡系统</h4>
					<p>等级压制系统（减少玩家攻击低等级怪时战斗难度），实际战力平衡（玩家打过第一关，就能到难度更高，更接近玩家水平的第二关，以此类推），等级平衡（均衡任务），战利品平衡。</p>
				</div>
				<div class="clearfix"></div>
			</div>
			<div class="clearfix"></div>
		</div>
	</div>
</div>
<!-- What New Part Endss Here -->
<!-- Footer Starts Here -->
<div class="footer">
	<div class="container">
		<ul class="social">
			<li><i class="fa"></i></li>
			<li><i class="fb"></i></li>
			<li><i class="fc"></i></li>
		</ul>
	</div>
	
</div>
<!-- Footer Ends Here -->
</body>
</html>